<template>
  <el-dialog
    :visible.sync="visible"
    width="500px"
    style="height: 600px"
    :show-close="false"
  >
    <div slot="title" class="tilte">{{ formData.otherConfig.title }}</div>
    <el-form :model="formData.form">
      <el-form-item>
        <div style="width: 100%; display: flex; justify-content: center">
          <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
            style="width: 80%"
            >全选</el-checkbox
          >
        </div>
        <div class="group-div">
          <el-checkbox-group
            v-model="formData.form.checkedArr"
            @change="handleCheckedChange"
          >
            <el-checkbox
              v-for="item in formData.otherConfig.options"
              :label="item"
              :key="item"
              >{{ item }}</el-checkbox
            >
          </el-checkbox-group>
        </div>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false" class="cancel-style">{{
        formData.otherConfig.cancelBtn
      }}</el-button>
      <el-button type="primary" @click="save" class="save-style">{{
        formData.otherConfig.saveBtn
      }}</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  name: 'selectDialog',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    formData: {
      type: Object,
      default: () => {
        return {
          otherConfig: {},
          form: {}
        };
      }
    }
  },
  computed: {
    visible: {
      get() {
        return this.dialogVisible;
      },
      set(val) {
        this.$emit('update:dialogVisible', val);
      }
    }
  },
  data() {
    return {
      checkAll: false,
      isIndeterminate: true
    };
  },
  methods: {
    save() {
      this.$emit('submit', this.formData.form.checkedArr);
    },
    handleCheckAllChange(val) {
      this.formData.form.checkedArr = val
        ? this.formData.otherConfig.options
        : [];
      this.isIndeterminate = false;
    },
    handleCheckedChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.formData.otherConfig.options.length;
      this.isIndeterminate =
        checkedCount > 0 &&
        checkedCount < this.formData.otherConfig.options.length;
    }
  }
};
</script>

<style scoped lang="scss">
::v-deep .el-dialog {
  background: transparent;
  background-image: url('@/assets/img/dialog.png');
  // background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 5999;
  .tilte {
    background-image: url('@/assets/img/dialog-top.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 33px;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
    padding: 0 !important;
  }
  .el-dialog__header {
    padding: 0px;
  }
  .el-dialog__body {
    padding: 0px 30px 0;
  }
  .el-form-item__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .el-checkbox {
    // display: block !important;
    margin-right: 0;
    width: 80%;
    // border: 1px solid red;
    margin-left: 20px;
  }
  .group-div {
    max-height: 300px;
    overflow-y: scroll;
    display: flex;
    justify-content: center;
    background: #111b25;
    border-radius: 5px 5px 5px 5px;
    border: 1px solid #2b6189;
    opacity: 0.7;
  }
  .el-checkbox-group {
    // flex-direction: column;

    // align-items: flex-start;
    width: 80%;
    margin-right: 20px;
  }
  .el-form-item__label {
    color: #ffffff;
    font-size: 13px;
  }
  .el-dialog__footer {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .el-button {
    border: none;
    background: #021c34;
    box-shadow: inset 0px 0px 8px 0px #00c2ff;
    border-radius: 4px 4px 4px 4px;
    color: #ffffff;
    font-size: 12px;
    padding: 0px 15px !important;
    // line-height: 20px;
    height: 30px;
    border-radius: 3px 3px 3px 3px;
    border: 1px solid;
    border-image: linear-gradient(
        90deg,
        rgba(43, 97, 137, 1),
        rgba(152, 211, 255, 1),
        rgba(43, 97, 137, 1)
      )
      1 1;
  }
  .save-style {
    background: linear-gradient(180deg, #258cca 0%, #0e5fff 100%);
    border-image: linear-gradient(
        90deg,
        rgba(43, 97, 137, 1),
        rgba(152, 211, 255, 1),
        rgba(43, 97, 137, 1)
      )
      1 1;
  }
}
</style>
